<template>
	<view>
		<view class="bcg" :style="{background:`url(${userinfo.img}) no-repeat`,backgroundSize: 'cover',
				backgroundPosition: 'center'}">
			<view class="inner"></view>
		</view>
		<view class="img">
			<image :src="userinfo.img" mode=""></image>
			<view class="textname">
				{{ userinfo.name}}
			</view>

			<view class="times">
				<view class="" v-if="isjiet">
					00:00:00:00
				</view>
				<view class="" v-else>
					等待对方接受邀请
				</view>
			</view>
		</view>

		<view class="footer">
			<!-- <view class="btn" @click="colseMessage">
				<image src="../../static/icon/icon6.png" mode=""></image>
				<view class="text">
					取消
				</view>
			</view> -->
			
			<view class="btn" @click="colseMessage">
				<image src="../../static/icon/icon6.png" mode=""></image>
				<view class="text">
					挂断
				</view>
			</view>
			<view class="btn" >
				<image src="../../static/icon/icon5.png" mode=""></image>
				<view class="text">
					接听
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				bacImage: '',
				isjiet: false
			}
		},
		onLoad(option) {
			this.userinfo = JSON.parse(decodeURIComponent(option.userinfo))
		},
		methods: {
			colseMessage(){
				uni.navigateBack()
			}

		}
	}
</script>

<style lang="scss">
	.bcg {
		width: 100%;
		height: 100vh;
		.inner {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(10px);
			z-index: -1;
		}
	}

	.img {
		position: fixed;
		top: 360rpx;
		left: 50%;
		transform: translate(-50%);
		width: 100%;
		text-align: center;

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			// box-shadow: 0 0 15rpx 8rpx #ecf5ff;
		}

		.textname {
			width: 100%;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
		}

		.times {
			color: #f6f6f6;
			font-size: 30rpx;
			margin-top: 300rpx;
		}

	}

	.footer {
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%);
		width: 100%;
		text-align: center;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-evenly;
        .btn{
			text-align: center;
			width: 120rpx;
			image {
				width: 120rpx;
				height: 120rpx;
			}
			.text{
				font-size: 28rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
		

	}
</style>